<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 将某学校的学生成绩转化为不同等级，划分标准如下：
    ①“优秀”，大于等于90分；
    ②“良好”，大于等于75分；
    ③“及格”，大于等于60分；
    ④“不及格”，小于60分。
输入张三的考试成绩，输出该成绩对应的等级。 -->

    <script src="./vue.js"></script>
    <div id="app">
        请输入张三的考试成绩 <input type="text" v-model="msg" @input="check">
        <h2>{{str}}</h2>
    </div>
    

</body>

<script>
let vue=new Vue({
    el:"#app",
    data:{
        msg:"",
        str:"还没有输入成绩"
    },
    methods: {
        check(){
            if(this.msg>90){
                this.str="成绩为优秀"
            }else if(this.msg>75){
                this.str="成绩为良好"
            }else if(this.msg>60){
                this.str="成绩为及格"
            }else{
                this.str="成绩为不及格"
            }
            
            console.log(this.msg)
        }
    },
})
</script>
</html>